<template>
  <div class="login-bg">
    <el-form class="login-form" :model="loginForm" ref="loginForm" :rules="loginRules" label-width="80px">

      <h1>{{$t('login.project.name')}}</h1>

      <el-form-item :label="$t('login.loginName')" prop="loginName">
        <el-input v-model="loginForm.loginName" :prefix-icon="prefixIcon.loginName" clearable
                  :placeholder="$t('login.placeholder.loginName')"></el-input>
      </el-form-item>

      <el-form-item :label="$t('login.passWord')" prop="passWord">
        <el-input v-model="loginForm.passWord" :prefix-icon="prefixIcon.passWord" clearable show-password
                  :placeholder="$t('login.placeholder.passWord')"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button :loading="loginForm.loading" type="primary" @click="login('loginForm')" round>
          {{$t('login.loginBtn')}}
        </el-button>
      </el-form-item>

    </el-form>
  </div>
</template>
<script>
import {MessageUtils} from '@/utils/business.js'

export default {
  data () {
    return {
      show: true,
      loginForm: {
        loginName: 'admin',
        passWord: '123456',
        loading: false
      },
      prefixIcon: {
        loginName: 'el-icon-user',
        passWord: 'el-icon-lock'
      },
      loginRules: {
        loginName: [
          {required: true, message: this.$t('login.rules.loginName.required'), trigger: 'blur'},
          {min: 3, max: 8, message: this.$t('login.rules.loginName.length'), trigger: 'blur'}
        ],
        passWord: [
          {required: true, message: this.$t('login.rules.passWord.required'), trigger: 'blur'},
          {min: 3, max: 8, message: this.$t('login.rules.passWord.length'), trigger: 'blur'}
        ]
      }
    }
  },
  created () {
    this.$i18n.locale = 'zh' // 国际化设置
  },
  methods: {
    login (e) {
      this.loginForm.loading = true
      this.$refs[e].validate((valid) => {
        if (valid) {
          this.loginForm.loading = false
          const user = {
            userName: this.loginForm.loginName,
            passWord: this.loginForm.passWord
          }
          this.$store.dispatch('Login', user).then(() => {
            this.loginForm.loading = false
            new MessageUtils().SUCCESS(this.$t('login.message.success'))
            this.$router.push({ path: this.redirect || '/index/index' })
          })
        } else {
          this.loginForm.loading = false
          new MessageUtils().ERROR(this.$t('login.message.error'))
        }
      })
    }
  }
}
</script>

<style>
  .login-bg {
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    align-items: center; /*定义body的元素垂直居中*/
    justify-content: center; /*定义body的里的元素水平居中*/
    text-align: center;
    margin: 0 auto;
  }

  .login-form {
    padding: 50px;
    display: inline-block;
    position: relative;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .login-form button {
    width: 80%;
  }
</style>
